<!--
 * @Author: your name
 * @Date: 2020-08-31 11:41:18
 * @LastEditTime: 2020-09-08 16:22:05
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \admin-management\web\src\views\system\menu-list.vue
-->
<template>
  <div class="main-wrap">
    <toolbarTop :left="left" @refresh="refresh" @add="add" />
    <a-table
      rowKey="article_id"
      bordered
      size="middle"
      v-bind="$attrs"
      :columns="data.columns"
      :data-source="data.data"
    >
      <template v-slot:cover="{ record }">
        <img v-if="record.image" class="cover-img" :src="record.image.file_path" alt="" />
      </template>
      <template v-slot:showType="{ record }">
        {{ record.show_type === 10 ? '小图' : '大图' }}
      </template>
      <template v-slot:status="record">
        <CustomSwitch disabled v-model:value="record.record[record.column.key]" />
      </template>
      <template v-slot:operation="{ record }">
        <a-button @click="edit(record)" shape="circle" size="small">
          <template v-slot:icon><SvgIcon name="edit-square" /></template>
        </a-button>
        <a-popconfirm title="Sure to delete?" @confirm="del(record)">
          <a-button type="danger" shape="circle" size="small">
            <SvgIcon name="delete" />
          </a-button>
        </a-popconfirm>
      </template>
    </a-table>
    <ArticleDialog
      @refresh="refresh"
      v-model:visible="dialog.visible"
      v-if="dialog.visible"
      :data="dialog"
      :title="dialog.title"
    />
  </div>
</template>

<script>
import { getCurrentInstance, reactive } from 'vue';
import ArticleDialog from './article-dialog';
import toolbarTop from '../../../components/toolbar/toolbar-top.vue';
import CustomSwitch from '../../../components/form-item/custom-switch';
export default {
  name: 'ArticleList',
  components: {
    ArticleDialog,
    toolbarTop,
    CustomSwitch
  },
  setup() {
    let { ctx } = getCurrentInstance();

    let left = [
      {
        text: '刷新',
        handleName: 'refresh'
      },
      {
        text: '新增',
        handleName: 'add'
      }
    ];

    function refresh() {
      getData();
    }

    let data = reactive({
      data: [],
      columns: [
        {
          title: '标题',
          dataIndex: 'article_title',
          key: 'article_title'
        },
        {
          title: '封面',
          dataIndex: 'image_id',
          key: 'image_id',
          slots: { customRender: 'cover' }
        },
        {
          title: '显示方式',
          dataIndex: 'show_type',
          key: 'show_type',
          slots: { customRender: 'showType' }
        },
        {
          title: '虚拟阅读量',
          dataIndex: 'virtual_views',
          key: 'virtual_views'
        },
        {
          title: '实际阅读量',
          dataIndex: 'actual_views',
          key: 'actual_views'
        },
        {
          title: '创建时间',
          dataIndex: 'create_time',
          key: 'create_time'
        },
        {
          title: '状态',
          dataIndex: 'article_status',
          key: 'article_status',
          slots: { customRender: 'status' }
        },
        {
          title: '排序',
          dataIndex: 'article_sort',
          key: 'article_sort'
        },
        {
          title: '操作',
          dataIndex: 'operation',
          slots: { customRender: 'operation' }
        }
      ]
    });

    async function getData() {
      let role = await ctx.$fetch.post('/content.article/index');
      data.data = role.data.data;
    }
    getData();

    let dialog = reactive({
      title: '',
      visible: false,
      record: {},
      menu: {},
      isAdd: false
    });
    function edit(record) {
      dialog.title = '编辑文章';
      dialog.visible = true;
      dialog.record = { ...record };
      dialog.isAdd = false;
    }
    function add(record) {
      dialog.title = '新增文章';
      dialog.visible = true;
      dialog.record = { ...record };
      dialog.isAdd = true;
    }
    async function del(record) {
      console.log('record :>> ', record);
      let res = await ctx.$fetch.post('/content.article/delete', {
        article_id: record.article_id
      });
      ctx.$message.success(res.msg);
      refresh();
    }

    return {
      data,
      edit,
      dialog,
      left,
      refresh,
      add,
      del
    };
  }
};
</script>
<style lang="scss" scoped>
.cover-img {
  width: 80px;
  height: 80px;
}
</style>
